<template>
  <div class="smart-pagination" v-if="totalItems > 0">
    <!-- 分页信息展示 -->
    <div class="pagination-info">
      <span class="info-text">
        显示 {{ rangeStart }}-{{ rangeEnd }} 条，共 {{ totalItems }} 条
      </span>
      <div class="page-size-selector">
        <span class="selector-label">每页</span>
        <select
            v-model="internalPageSize"
            @change="handlePageSizeChange"
            class="size-select"
        >
          <option v-for="size in pageSizeOptions" :key="size" :value="size">
            {{ size }}
          </option>
        </select>
        <span class="selector-label">条</span>
      </div>
    </div>

    <!-- 分页控件 -->
    <div class="pagination-controls">
      <!-- 上一页按钮 -->
      <button
          class="page-nav prev"
          :disabled="currentPage === 1"
          @click="goToPage(currentPage - 1)"
      >
        <svg class="nav-icon" viewBox="0 0 24 24">
          <path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"/>
        </svg>
      </button>

      <!-- 页码按钮 -->
      <div class="page-numbers">
        <template v-if="totalPages <= 7">
          <button
              v-for="page in totalPages"
              :key="page"
              class="page-number"
              :class="{ active: page === currentPage }"
              @click="goToPage(page)"
          >
            {{ page }}
          </button>
        </template>

        <template v-else>
          <button
              v-if="currentPage > 4"
              class="page-number"
              @click="goToPage(1)"
          >
            1
          </button>

          <span v-if="currentPage > 4" class="page-ellipsis">...</span>

          <button
              v-for="page in visiblePages"
              :key="page"
              class="page-number"
              :class="{ active: page === currentPage }"
              @click="goToPage(page)"
          >
            {{ page }}
          </button>

          <span v-if="currentPage < totalPages - 3" class="page-ellipsis">...</span>

          <button
              v-if="currentPage < totalPages - 3"
              class="page-number"
              @click="goToPage(totalPages)"
          >
            {{ totalPages }}
          </button>
        </template>
      </div>

      <!-- 下一页按钮 -->
      <button
          class="page-nav next"
          :disabled="currentPage === totalPages"
          @click="goToPage(currentPage + 1)"
      >
        <svg class="nav-icon" viewBox="0 0 24 24">
          <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
        </svg>
      </button>

      <!-- 快速跳转 -->
      <div class="page-jump" v-if="totalPages > 10">
        <span>跳至</span>
        <input
            type="number"
            v-model.number="jumpPage"
            @keyup.enter="handleJump"
            min="1"
            :max="totalPages"
            class="jump-input"
        >
        <span>页</span>
        <button @click="handleJump" class="jump-btn">确定</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SmartPagination',
  props: {
    currentPage: {
      type: Number,
      required: true
    },
    pageSize: {
      type: Number,
      default: 10  // 默认每页10条
    },
    totalItems: {
      type: Number,
      required: true,
      default: 0 // 确保有默认值
    },
    pageSizeOptions: {
      type: Array,
      default: () => [10, 20, 50, 100]  // 确保包含10
    }
  },
  data() {
    return {
      jumpPage: this.currentPage,
      internalPageSize: this.pageSize  // 内部维护的pageSize
    }
  },
  computed: {
    // 总页数
    totalPages() {
      return Math.ceil(this.totalItems / this.internalPageSize)
    },
    // 当前页起始条目
    rangeStart() {
      return (this.currentPage - 1) * this.internalPageSize + 1
    },
    // 当前页结束条目
    rangeEnd() {
      return Math.min(this.currentPage * this.internalPageSize, this.totalItems)
    },
    // 可见页码范围
    visiblePages() {
      const pages = []
      let startPage = Math.max(1, this.currentPage - 2)
      let endPage = Math.min(this.totalPages, this.currentPage + 2)

      if (this.currentPage <= 3) {
        endPage = Math.min(5, this.totalPages)
      } else if (this.currentPage >= this.totalPages - 2) {
        startPage = Math.max(this.totalPages - 4, 1)
      }

      for (let i = startPage; i <= endPage; i++) {
        pages.push(i)
      }
      return pages
    }
  },
  watch: {
    // 同步父组件传入的pageSize变化
    pageSize(newVal) {
      this.internalPageSize = newVal
    }
  },
  methods: {
    // 跳转到指定页
    goToPage(page) {
      if (page >= 1 && page <= this.totalPages && page !== this.currentPage) {
        this.$emit('page-change', page)
      }
    },
    // 每页条数变更
    handlePageSizeChange() {
      this.$emit('size-change', this.internalPageSize)
    },
    // 快速跳转
    handleJump() {
      const page = Math.max(1, Math.min(this.totalPages, this.jumpPage))
      this.goToPage(page)
      this.jumpPage = page
    }
  }
}
</script>
<style lang="less" scoped>
@import "@/styles/variables.less";

.smart-pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  font-family: 'Segoe UI', 'PingFang SC', sans-serif;
  color: @gray-700;

  .pagination-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 0.5rem;

    .info-text {
      font-size: 0.875rem;
    }

    .page-size-selector {
      display: flex;
      align-items: center;
      gap: 0.5rem;

      .selector-label {
        font-size: 0.875rem;
        color: @gray-600;
      }

      .size-select {
        padding: 0.375rem 0.75rem;
        border: 1px solid @gray-300;
        border-radius: @radius-sm;
        background-color: white;
        font-size: 0.875rem;
        transition: @transition;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.5rem center;
        background-size: 1rem;
        padding-right: 1.75rem;

        &:focus {
          outline: none;
          border-color: @primary;
          box-shadow: 0 0 0 3px rgba(@primary, 0.1);
        }
      }
    }
  }

  .pagination-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    .page-nav {
      width: 2.5rem;
      height: 2.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid @gray-300;
      border-radius: @radius-md;
      background-color: white;
      color: @gray-700;
      cursor: pointer;
      transition: @transition;

      &:hover:not(:disabled) {
        background-color: @gray-50;
        border-color: @gray-400;
      }

      &:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }

      &.prev {
        margin-right: 0.5rem;
      }

      &.next {
        margin-left: 0.5rem;
      }

      .nav-icon {
        width: 1.25rem;
        height: 1.25rem;
        fill: currentColor;
      }
    }

    .page-numbers {
      display: flex;
      gap: 0.25rem;

      .page-number {
        min-width: 2.5rem;
        height: 2.5rem;
        padding: 0 0.5rem;
        border: 1px solid @gray-300;
        border-radius: @radius-md;
        background-color: white;
        color: @gray-700;
        font-size: 0.875rem;
        font-weight: 500;
        cursor: pointer;
        transition: @transition;

        &:hover:not(.active) {
          background-color: @gray-50;
          border-color: @gray-400;
        }

        &.active {
          background-color: @primary;
          color: white;
          border-color: @primary;
        }
      }

      .page-ellipsis {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 2.5rem;
        height: 2.5rem;
        color: @gray-500;
        user-select: none;
      }
    }

    .page-jump {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-left: 1rem;
      font-size: 0.875rem;

      .jump-input {
        width: 3.5rem;
        padding: 0.375rem 0.5rem;
        border: 1px solid @gray-300;
        border-radius: @radius-sm;
        text-align: center;

        &:focus {
          outline: none;
          border-color: @primary;
          box-shadow: 0 0 0 3px rgba(@primary, 0.1);
        }

        &::-webkit-outer-spin-button,
        &::-webkit-inner-spin-button {
          -webkit-appearance: none;
          margin: 0;
        }
      }

      .jump-btn {
        padding: 0.375rem 0.75rem;
        border: 1px solid @gray-300;
        border-radius: @radius-sm;
        background-color: white;
        color: @gray-700;
        font-size: 0.875rem;
        cursor: pointer;
        transition: @transition;

        &:hover {
          background-color: @gray-50;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .smart-pagination {
    .pagination-info {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5rem;
    }

    .pagination-controls {
      flex-wrap: wrap;
      justify-content: center;

      .page-jump {
        margin-left: 0;
        margin-top: 0.5rem;
        width: 100%;
        justify-content: center;
      }
    }
  }
}
</style>